<template>
	<view class="">
		<zhSlidingMenu ref='zhSlidingMenu' :tabbar='list' :scrollH="scrollH">
			<template #default="{scroll_list}">
				<view class="goods">
					<view class="goods_item" v-for="(item, index) in scroll_list" :key="index"
						@click="clickGoods(item)">
						<image class="goods_item_img" :src="item.icon" mode=""></image>
						<view class="goods_item_name">{{item.name}}</view>
					</view>
				</view>
			</template>
		</zhSlidingMenu>
	</view>
</template>

<script>
	import zhSlidingMenu from '@/components/zhSlidingMenu/zhSlidingMenu.vue'
	export default {
		components: {
			zhSlidingMenu
		},
		data() {
			return {
				scrollH: 0, //scroll高度
				list: [{
						name: "女装",
						children: [{
								name: "A字裙",
								icon: "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
							},
							{
								name: "礼服/婚纱",
								icon: "https://cdn.uviewui.com/uview/common/classify/1/14.jpg",
							}
						]
					},
					{
						name: "美食",
						children: [{
								name: "火锅",
								icon: "https://cdn.uviewui.com/uview/common/classify/2/1.jpg",
							},
							{
								name: "精品茗茶",
								icon: "https://cdn.uviewui.com/uview/common/classify/2/7.jpg",
							},
							{
								name: "休闲食品",
								icon: "https://cdn.uviewui.com/uview/common/classify/2/8.jpg",
							},
						]
					},
					{
						name: "美妆",
						children: [{
								name: "化妆刷",
								icon: "https://cdn.uviewui.com/uview/common/classify/3/1.jpg",
							},
							{
								name: "防晒品",
								icon: "https://cdn.uviewui.com/uview/common/classify/3/14.jpg",
							},
							{
								name: "美甲",
								icon: "https://cdn.uviewui.com/uview/common/classify/3/15.jpg",
							}

						]
					}
				],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
				}
			});
		},
		methods: {
			clickGoods(item) { //点击商品
				console.log(item);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.goods {
		display: flex;
		flex-wrap: wrap;

		.goods_item {
			width: 33.3%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-top: 20rpx;

			.goods_item_img {
				width: 120rpx;
				height: 120rpx;
			}

			.goods_item_name {
				color: #333;
				font-size: 28rpx;
				font-weight: 500rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
				text-align: center;
			}
		}

	}
</style>